import React from 'react';
import {Card, Button, Icon} from 'antd';
import style from './index.less';
import moment from 'moment';

export default function (props) {
    return <Card
        title={<div className={style.title}>{props.title}</div>}
        headStyle={{borderBottom: 'none'}}
        bordered={false}
    >
        <div className={style.info}>
            <div>
                <span className={style.label}>发件人：</span>
                <a>{props.from.name}</a>
                <a>{'<'}{props.from.mail}{'>'}</a>
            </div>
            <div >
                <span className={style.label}>收件人：</span>
                <span>{props.to.name}</span>
                <span>{'<'}{props.to.mail}{'>'}</span>
                <span style={{float: 'right'}}>{moment(props.date).format('MM月DD日 hh:mm:ss')}</span>
            </div>
        </div>
        <Button.Group>
            <Button size="small" onClick={props.onStar}><Icon type="star" style={{fontWeight: 'lighter'}}/></Button>    
            <Button size="small" onClick={props.onReply}>回复</Button>
            <Button size="small" onClick={props.onForward}>转发</Button>
            <Button icon="delete" size="small" type="danger" onClick={props.onDelete}>删除</Button>
        </Button.Group>
        <div className={style.main} dangerouslySetInnerHTML={{__html: props.content}} />
        <Button.Group>
            <Button size="small" onClick={props.onStar}><Icon type="star" style={{fontWeight: 'lighter'}}/></Button>    
            <Button size="small" onClick={props.onReply}>回复</Button>
            <Button size="small" onClick={props.onForward}>转发</Button>
            <Button icon="delete" size="small" type="danger" onClick={props.onDelete}>删除</Button>
        </Button.Group>
    </Card>
}